import React from "react";
import axios from "axios";
import { useEffect, useState } from "react";
import { SidebarStaff } from "../../components/Sidebar";
import { useNavigate, useParams } from "react-router-dom";
import { Button } from "antd";

export const ManageModule: React.FC = () => {
  const params = useParams();
  const [saRoleCheck, setSaRoleCheck] = useState(false);
  const [moduleInfo, setModuleInfo] = useState("");
  const navigate = useNavigate();

  //check if staff is already logged in
  useEffect(() => {
    axios({
      method: "GET",
      headers: { satoken: window.localStorage.getItem("satoken") },
      url: "http://localhost:8080/user/staff/module",
    }).then((res) => {
      if (res.data.success) {
        setSaRoleCheck(true);
      } else {
        setSaRoleCheck(false);
      }
    });
  }, []); // initial render

  // get module info to display
  useEffect(() => {
    axios({
      method: "GET",
      headers: { satoken: window.localStorage.getItem("satoken") },
      url: "http://localhost:8080/module/info/" + params.id,
    }).then((res) => {
      if (res.data.success) {
        setModuleInfo(
          res.data["data"]["code"] + " " + res.data["data"]["name"]
        );
      }
    });
  }, [params.id]); // initial render

  if (saRoleCheck) {
    return (
      <>
        <SidebarStaff />
        <div className="moduleCard">
          <h3>{moduleInfo}</h3>
          <ul>
            <li>
              <Button style={
                {
                  width: '35%',
                  height: '40px',
                  borderRadius: 0,
                  textAlign: 'left',
                }
              } onClick={() => {
                navigate(`/staff/module/${params.id}/students`)
              }}>Students
              </Button>
            </li>
            <li>
              <Button style={
                {
                  width: '35%',
                  height: '40px',
                  borderRadius: 0,
                  textAlign: 'left',
                }
              } onClick={() => {
                navigate(`/staff/module/${params.id}/TAs`)
              }}>Teaching Assistants
              </Button>
            </li>
            <li>
              <Button style={
                {
                  width: '35%',
                  height: '40px',
                  borderRadius: 0,
                  textAlign: 'left',
                }
              } onClick={() => {
                navigate(`/staff/module/${params.id}/assignments`)
              }}>Assignments
              </Button>
            </li>
          </ul>
        </div>
      </>
    );
  } else {
    return <></>;
  }
};
